body{
    /* 背景调整 */
    background: url('https://game.gtimg.cn/images/yxzj/web202311/bg-1a966396.jpg');
    /* 调整为全覆盖模式，不够的地方会重复生成一张背景补上 */
    background-size: cover;
    /* 为了美观，调整成没有重复 */
    background-repeat: no-repeat;
    /* 将背景图放在底部，释放文档流拖拽的时候不会动 */
    background-attachment: fixed;
}

.dataDiv{

    width: 885px;
    height: 300px;


    background-color: rgba(0, 0, 0, 0.5);

    margin:auto;
    margin-top: 1000px;

    /* 给一个相对布局，为方便后续光标移动做参考 */
    position: relative;



}

.banners{
    width: 80%;
    height: 60px;

}

.banner{
    width: 20%;
    height: 60px;

    font-size: 30px;
    color: white;

    text-align: center;
    line-height: 60px;
    margin: auto;
    /* 因为会释放文档流，所以下面内容的绘制需要注意一下 */
    float: left;

}

.line{
    width: 100%;
    height: 1px;
    background-color: rgb(90, 59, 39);
}

.lightFlag{
    width: 16%;

    /* 以dataDiv为父视图，将光标与划分线对齐 */
    position: absolute;

    top: 47px;
    left:0px;

    /* 给有动画的时候一个转换 */
    transition: all 0.2s linear;
}

.contents{
    width: 80%;
    margin: auto;
    margin-top: 20px;
}

.contents > div{
    width: 100%;

    color: rgb(212, 201, 201);
    font-size: 25px;

    padding-top: 9px;

    box-sizing: border-box;

    transition: all 0.1s linear;

    cursor: pointer;
}